<template>
  <div class="layout" :class="{'layout-hide-text': spanLeft < 4}">
    <Row type="flex">
      <Col :span="spanLeft" class="layout-menu-left">
      <Mune :spanLeft="spanLeft"></Mune>
      </Col>
      <Col :span="spanRight">
      <div class="layout-header">
        <Row>
          <Col span="20">
          <Button type="text" @click="toggleClick">
            <Icon type="navicon" size="32"></Icon>
          </Button>
          </Col>
          <Col span="4">
          <div style="text-align: center;margin-top: 4px;">
            <Dropdown>
              <a href="javascript:void(0)" style="color: #2C3E50;font-size: 8px;">
              	<Avatar icon="person" />
                <br> {{me.nick_name}}-{{me.role?me.role.role_name:''}}
                <Icon type="arrow-down-b" color="black"></Icon>
              </a>
              <Dropdown-menu slot="list">
                <Dropdown-item>修改密码</Dropdown-item>
                <Dropdown-item>退出登录</Dropdown-item>
              </Dropdown-menu>
            </Dropdown>

          </div>
          </Col>
        </Row>
      </div>
      <div class="layout-breadcrumb">
        <Bread></Bread>
      </div>
      <div class="layout-content">
        <div class="layout-content-main">
          <router-view></router-view>
        </div>
      </div>
      <div class="layout-copy">
        2014-2017 &copy; 良晋微沐出品
      </div>
      </Col>
    </Row>
  </div>
</template>
<script>
  import { mapState, mapMutations } from 'vuex'
  import userApi from '@/api/userApi'
  import Mune from '@/components/common/Mune'
  import Bread from '@/components/common/Bread'

  export default {
    computed: {
      ...mapState([
        'me'
      ])
    },
    data() {
      return {
        spanLeft: 4,
        spanRight: 20
      }
    },
    methods: {
      ...mapMutations([
        'updateMe'
      ]),
      toggleClick() {
        if(this.spanLeft === 4) {
          this.spanLeft = 2;
          this.spanRight = 22;
        } else {
          this.spanLeft = 4;
          this.spanRight = 20;
        }
      }
    },
    components: {
      'Mune': Mune,
      'Bread': Bread
    },
    mounted() {
      if(!sessionStorage.getItem('token')) {
        this.$router.push('/login')
      }
      var token = sessionStorage.getItem('token')
      if(token && !this.me.role) {
        // 获取当前用户信息
        userApi.me().then(data => {
          this.updateMe(data)
        }).catch(errMsg => {
          this.$Message.error(errMsg)
        })
      }
    }
  }
</script>
<style>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: static;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .layout-breadcrumb {
    padding: 10px 15px 0;
  }
  
  .layout-content {
    min-height: 800px;
    margin: 15px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
  }
  
  .layout-content-main {
    padding: 10px;
  }
  
  .layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
  }
  
  .layout-menu-left {
    background: #464c5b;
  }
  
  .layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }
  
  .layout-logo-left {
    width: 90%;
    height: 40px;
    overflow: hidden;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }
  
  .layout-ceiling-main a {
    color: #9ba7b5;
  }
  
  .layout-hide-text .layout-text {
    display: none;
  }
  
  .ivu-col {
    transition: width .2s ease-in-out;
  }
</style>